<template>
    <el-dialog
    v-model="dialogVisible" title="商品分类选择器" width="80%" 
    style="min-width: 700px;"
    draggable
    >

        <div class="box">
            <el-form>
                <el-row :gutter="20">

                    <el-col :span="6">
                        <el-form-item label="ID">
                            <el-input size="large" :placeholder="'ID'" v-model="requestParam.data.id"
                                autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="名称">
                            <el-input size="large" :placeholder="'名称'" v-model="requestParam.data.name"
                                autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>


                    <el-col :span="4">
                        <el-form-item label="编码">
                            <el-input size="large" :placeholder="'编码'" v-model="requestParam.data.code"
                                autocomplete="off"
                                @keyup.enter.native="getBodyData()"
                                ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item>
                            <el-radio-group v-model="isTop" class="ml-4">
                                <el-radio :label="true" size="large">最上级分类</el-radio>
                                <el-radio :label="false" size="large">展开</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <!-- 查询 -->
                    <el-col :span="6">
                        <el-form-item>
                            <el-button size="large" type="primary" @click.prevent="getBodyData()">查询</el-button>
                        </el-form-item>
                    </el-col>


                </el-row>

            </el-form>

        </div>

        <div class="box">

            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>商品分类选择器</span>
                    </div>
                </template>

                <el-table ref="table" @selection-change="selectionChange" :reserve-selection="true" v-loading="loading"
                    element-loading-text="Loading..." :data="bodyData.content" style="width: 100%" row-key="id"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" max-height="500px">

                    <!-- 序号 -->
                    <el-table-column type="index" label="序号" width="55" />

                    <el-table-column prop="id" label="ID"></el-table-column>

                    <el-table-column prop="name" label="名称"></el-table-column>
                    
                    <el-table-column prop="code" label="编码"></el-table-column>
                    <!-- 上级商品 -->
                    <el-table-column prop="parent" label="上级商品名称">
                        <template #default="{ row }">
                            <div v-if="row.parent != null && row.parent.name != null">
                                {{ row.parent.name }}
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 商品图片 -->
                    <el-table-column prop="image" label="图片">
                        <template #default="{ row }">
                            <el-image v-if="row.fileIdOfImg != null && row.fileIdOfImg != ''" fit="contain"
                                :src="$kt.file.visit(row.fileIdOfImg)" alt="" style="width: 100px; height: 100px;"
                                :preview-src-list="[$kt.file.visit(row.fileIdOfImg)]" z-index="9999999999"
                                :preview-teleported="true" />
                            <div v-else>无</div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="gmtCreate" label="创建时间">
                        <template #default="{ row }">
                            {{ new Date(row.gmtCreate).toLocaleDateString() }}
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="" width="120">
                        <template #default="scope">
                            <el-button type="primary" @click.prevent="toSelect(scope.row)">
                                选择
                            </el-button>

                        </template>
                    </el-table-column>

                </el-table>
                <div style="position:relative;
                height: 30px;
                ">
                    <el-pagination @current-change="pageChange" style="
                    position:absolute;
                    left:50%;
                    top:10px;
                    transform:translateX(-50%);
                    " layout="prev, pager, next" :page-size="requestParam.pageSize"
                        :current-page="requestParam.pageNumber" :total="bodyData.totalElements" />
                </div>
            </el-card>
        </div>


    </el-dialog>
</template>

<script lang="ts" setup>
import { ref,defineEmits,defineExpose } from 'vue';
import $kt from '@/vueKantboot';
import { ElMessage, ElMessageBox } from 'element-plus';

let emits = defineEmits(['select']);

let toSelect = (res:any)=>{
    emits("select",res);
    dialogVisible.value=false;
}

let open = ()=>{
    dialogVisible.value=true;
}

defineExpose({
    open,
})

let dialogVisible=ref(false);

let dialogOfSave = ref();

let table = ref();

let toSave = (param: any) => {
    dialogOfSave.value.open(param);
}

let requestParam = ref({
    data: {
        id: "",
        name: "",
        code: "",
    },
    pageNumber: 1,
    pageSize: 30,
});

let isTop = ref(true);

let bodyData = ref({
    content: [
        {
            // 雪花id
            id: 123456789,
            name: '衣服',
            fileIdOfImg: 123456789,
            // 时间戳
            gmtCreate: 1627776000000,
            parent: null,
            children: [
                {
                    // 雪花id
                    id: 123456781,
                    name: '冬衣',
                    fileIdByImage: 123456789,
                    // 时间戳
                    gmtCreate: 1627776000000,
                    parent: {
                        id: 123456789,
                        name: '衣服',
                    }

                }
            ]
        }
    ],
    totalElements: 0,
});

let selection = ref([]);

let selectionChange = (val: any) => {
    selection.value = val;
}


let toEdit = (param: any) => {
    dialogOfSave.value.open(param);
}


let pageChange = (val: any) => {
    requestParam.value.pageNumber = val;
    getBodyData();
}

let toAddChildren = (param: any) => {
    dialogOfSave.value.open({
        id: "",
        name: "",
        parentId: param.id,
        fileIdOfImg: "",
    });
}


let loading = ref(true);

let getBodyData = () => {

    loading.value = true;

    if (isTop.value) {
        $kt.request.request({
            url: '/business-goods-web/admin/goodsType/getBodyDataTop',
            method: 'post',
            data: requestParam.value,
        }).then((res) => {
            if (res.data.success) {
                bodyData.value = res.data.data;
            }
            loading.value = false;
        });
        return false;
    }

    $kt.request.request({
        url: '/business-goods-web/admin/goodsType/getBodyData',
        method: 'post',
        data: requestParam.value,
    }).then((res) => {
        if (res.data.success) {
            bodyData.value = res.data.data;
        }
        loading.value = false;
    });
}

getBodyData();




</script>

<style lang="scss" scoped>


.box {
    padding: 20px 20px 0 20px;
}

.box-box {
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 30px;
    border-radius: 5px;
}


.box-box:hover {
    // 变小
    transform: scale(0.95);
}

.box-box:active {
    // 变小
    transform: scale(0.9);
}
</style>